<template>
<div id="slot">
    <header>
        <slot  name="header"></slot>
    </header>
    <main>
        <div v-for="(item, index) in list" :key="item.id">
        <slot name="main" :data="item"></slot>
        </div>
    </main>
    <footer>
        <slot name="footer"></slot>
    </footer>
</div>
</template>

 <script setup lang="ts">
 import { reactive } from 'vue'

type Names = {
    id:number,
    name:string,
    age:number
}

const list = reactive<Names[]>([ 
    {
        id:1,
        name:'小米',
        age:20
    },
     {
        id:2,
        name:'华为',
        age:21
    },
     {
        id:3,
        name:'苹果',
        age:22
    }
])

 </script>

<style lang="less" scoped>
#slot{
    header{ 
        width: 200px;
        height: 100px;
        background-color: rgb(200, 255, 0);
    }
    main{ 
        width: 200px;
        height: 100px;
        background-color: rgb(0, 255, 128);
    }
    footer{ 
        width: 200px;
        height: 100px;
        background-color: rgb(76, 0, 255);
    }
}
</style>